<template>
  <div class="page" style="">
    <div class="print_title">变更任务委托详情 · 禾美环保</div>
    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <PrintCol title="单据编号" :value="formData.billNo" />
      <PrintCol title="申请时间" :value="formData.createTime" />
      <PrintCol title="申请人" :value="filterMultiDictText(this.dictOptions['createBy'], formData.createBy + '')" />
      <PrintCol title="申请部门" :value="filterMultiDictText(this.dictOptions['sysOrgCode'], formData.sysOrgCode + '')" />
    </a-row>

    <p class="title" style="margin-top: 18px;">项目信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <PrintCol title="项目名称" :value="formData.projectName" />
      <PrintCol title="项目编号" :value="formData.projectId_dictText" />
      <PrintCol title="经营团队" :value="formData.teamName_dictText" />
      <PrintCol title="项目承接人" :value="formData.undertaker_dictText" />
      <PrintCol title="立项日期" :value="formData.projectEstablishDate" />
      <PrintCol title="签订单位" :value="formData.signUnit_dictText" />
      <PrintCol title="业绩归属年度" :value="formData.year" />
      <PrintCol title="业主单位" :value="formData.ownerUnit_dictText" />
      <PrintCol title="联系人" :value="formData.contacts_dictText" />
      <PrintCol title="联系方式" :value="formData.contactTel" />
      <PrintCol title="项目所在地址" :value="getAddress(formData.areaCode)" />
      <PrintCol title="项目详细地址" :value="formData.projectAddress" />
      <PrintCol title="项目来源" :value="formData.projectSource_dictText" />
      <PrintCol title="预计合同额(元)" :value="formData.estimatedContractAmount" />
      <PrintCol title="预计合同额大写" :value="formData.estimatedContractcapitalChineseAmount" />
      <PrintCol :span="24" title="立项事由及说明" :value="formData.establishReason" />
      <!-- <a-col :span="24">
                <a-row>
                    <a-col style="display: flex;">
                        <p style="margin-bottom: 0; white-space: nowrap">立项事由及说明:</p>
                        <p style="margin:0 0 0 6px; word-break: break-all;">{{
                            formData.estimatedContractcapitalChineseAmount }}</p>
                    </a-col>
                </a-row>
            </a-col> -->
    </a-row>

    <p class="title" style="margin-top: 18px;">任务信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <PrintCol title="任务编号" :value="formData.taskId_dictText" />
      <PrintCol title="业务分类" :value="formData.categoryName" />
      <PrintCol title="合同占比(%)" :value="formData.contractRate" />
      <PrintCol title="合同分配额(元)" :value="formData.contractAmount" />
      <PrintCol title="切割合同额(元)" :value="formData.cutContractAmount" />
      <PrintCol title="生产团队" :value="formData.productTeam_dictText" />
      <PrintCol title="任务类型" :value="formData.taskType_dictText" />
      <PrintCol title="实施部门" :value="formData.executeDepart_dictText" />
      <PrintCol title="部门负责人" :value="formData.minister_dictText" />
      <PrintCol title="项目负责人" :value="formData.projectLeading_dictText" />
      <!-- 环保咨询类 -->
      <template v-if="formData.taskType == 1 || formData.taskType == 4">
        <template v-if="formData.taskType == 1">
          <PrintCol title="审核工程师" :value="formData.approvalEngineer_dictText" />
        </template>
        <PrintCol title="审批级别" :value="formData.approvalLevel_dictText" />
        <PrintCol title="审批系数" :value="formData.approvalCoefficient" />
        <PrintCol title="行业类别" :value="formData.industryCategory_dictText" />
        <PrintCol title="行业系数" :value="formData.industryCoefficient" />
        <PrintCol title="复杂程度" :value="formData.complexity_dictText" />
        <PrintCol title="复杂系数" :value="formData.complexCoefficient" />
      </template>
      <!-- 检验检测类 -->
      <template v-if="formData.taskType == 2">
        <PrintCol title="是否出具报告:" :value="formData.isOutReport == '1' ? '是' : '否'" />
        <PrintCol title="费用核算方式:" :value="formData.expenseAccountingMethod_dictText" />
      </template>
      <PrintCol :span="24" title="说明" :value="formData.instruction" />
      <!-- <PrintCol title="需分配合同额(元)" :value="formData.separateContractAmount" /> -->
      <!-- <a-col :span="24">
                <a-row>
                    <a-col style="display: flex;">
                        <p style="margin-bottom: 0; white-space: nowrap">说明:</p>
                        <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.instruction }}</p>
                    </a-col>
                </a-row>
            </a-col> -->
    </a-row>
    <template v-if="formData.distributionDtList && formData.distributionDtList.length > 0">
      <p class="title" style="margin-top: 18px;">项目成员</p>
      <a-row type="flex" justify="start" style="padding: 0 0px;">
        <a-col :span="24">
          <a-table
            :columns="projectMemberColumns"
            :data-source="formData.distributionDtList"
            bordered
            :pagination="false"
            size="small"
            :rowClassName="tableRowClass"></a-table>
        </a-col>
      </a-row>
    </template>

    <template v-if="isShowProjectPay">
      <p class="title" style="margin-top: 18px;">项目预算</p>
      <a-row type="flex" justify="start" class="content">
        <PrintCol title="预算总工时(人小时)" :value="formData.expectWorkTime" />
        <PrintCol title="生产总绩效(元)" :value="formData.totalProductPerformance" />
        <PrintCol title="人工成本(元)" :value="formData.workCost" />
        <PrintCol title="委外费(元)" :value="formData.outsourcingFee" />
        <PrintCol title="差旅费(元)" :value="formData.travelFee" />
        <PrintCol title="专家评审费(元)" :value="formData.professionReviewFee" />
        <PrintCol title="其他成本(元)" :value="formData.otherCost" />
        <PrintCol title="项目预算合计(元)" :value="formData.totalProjectBudget" />
      </a-row>
    </template>
    <template v-if="isShowProjectPay && formData.categoryName">
      <FileInfor :purchaseFile="projectBudgetFile" v-if="isProjectInformation && projectBudgetFile && projectBudgetFile.length" title="项目预算表"></FileInfor>
      <FileInfor :purchaseFile="productBudgetFile" v-if="!isProjectInformation && productBudgetFile && productBudgetFile.length" title="生产绩效表"></FileInfor>
    </template>
    <template v-if="templateDataList && templateDataList.length">
      <p class="title" style="margin-top: 18px;">任务进度</p>
      <a-row type="flex" justify="start" class="content">
        <PrintCol title="进度模板" :value="formData.templateName" />
        <PrintCol title="允许添加子节点" :value="formData.isAddChildNode == '1' ? '是' : formData.isAddChildNode == '0' ? '否' : ''" />
        <PrintCol title="收入确认方式" :value="formData.confirmIncomeMethod_dictText" />
        <a-col :span="24">
          <a-table
            :columns="templateColumns"
            :data-source="templateDataList"
            bordered
            :pagination="false"
            size="small"
            :rowClassName="tableRowClass"></a-table>
        </a-col>
      </a-row>
    </template>

    <template v-if="progressNodeVoList && progressNodeVoList.length">
      <p class="title" style="margin-top: 18px;">款项进度</p>
      <a-row type="flex" justify="start" class="content">
        <a-col :span="24" style="margin-bottom: 18px;">
          <a-table
            :columns="paymentProgressColumns"
            :data-source="progressNodeVoList"
            bordered
            :pagination="false"
            size="small"
            :rowClassName="tableRowClass"></a-table>
        </a-col>
        <PrintCol title="履约保证金(元)" :value="formData.bail" />
        <PrintCol v-if="formData.bail" title="是否应收" :value="formData.isCollectionPayment == 1 ? '是' : '否'" />
        <PrintCol v-if="formData.isCollectionPayment == 1" title="预计应收日期" :value="formData.collectionDate" />
        <PrintCol v-if="formData.bail" :span="24" title="款项节点说明" :value="formData.paymentDesc" />
      </a-row>

    </template>

    <!-- <a-row type="flex" justify="center" v-if="formData.redistributionDtList && formData.redistributionDtList.length">
            <a-col>
                <p class="title_table" style="margin-top: 18px;">新增分配任务信息</p>
            </a-col>
            <a-col :span="24">
                <a-table :columns="columns" :data-source="formData.redistributionDtList" bordered :pagination="false"
                    size="small" :rowClassName="tableRowClass"></a-table>
            </a-col>
        </a-row> -->

    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" v-if="purchaseFile && purchaseFile.length" title="项目附件信息"></FileInfor>
    <FileInfor :purchaseFile="file" v-if="file && file.length" title="任务附件信息"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
import address from '@/components/AddressChoice/address.js'
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'

const PrintCol = {
    props: {
        span: {
            type: Number,
            default: 12
        },
        title: {
            type: String,
            default: ''
        },
        value: {
            // type: [String, Number],
            default: ''
        }
    },
    render() {
        const { title, value, span } = this
        return (
            <a-col span={span}>
                <a-row style="margin-bottom: 0">
                    <a-col style="display: flex;">
                        <p style="margin-bottom: 0; white-space: nowrap">{title}:</p>
                        <p style="margin:0 0 0 6px; word-break: break-all;">{value}</p>
                    </a-col>
                </a-row>
            </a-col>
        )
    }
}

export default {
    props: {
        formBpm: {
            type: Boolean,
            default: false
        },
        formData: {
            type: Object,
            default: () => { },
            required: true
        },
        formDataHistory: {
            type: [Object, String],
            default: () => { },
            required: true
        }
    },
    components: {
        FileInfor,
        ProcessInfor,
        PrintCol
    },
    computed: {
      isShowProjectPay() {
          if (this.formData.expectWorkTime === null || this.formData.expectWorkTime === '' || this.formData.workCost === null || this.formData.workCost === '' || this.formData.outsourcingFee === null || this.formData.outsourcingFee === '' || this.formData.travelFee === null || this.formData.travelFee === '' || this.formData.professionReviewFee === null || this.formData.professionReviewFee === '' || this.formData.otherCost === null || this.formData.otherCost === '') {
              return false
          } else {
              return true
          }
      },
      // 判断是否为工程运维或者数字信息的业务分类
      isProjectInformation() {
        // 判断categoryName是否含有工程运维或者数字信息
        if (this.formData.categoryName && (this.formData.categoryName.indexOf('工程运维') !== -1 || this.formData.categoryName.indexOf('数字信息') !== -1)) {
          return true
        } else {
          return false
        }
      }
    },
    data() {
        return {
            address,
            filterMultiDictText,
            dictOptions: {},
            dataHistorySource: [], // 流程列表

            templateDataList: [], // 进度模板列表
            progressNodeVoList: [], // 款项进度列表

            projectMemberColumns: [
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '项目成员',
                    align: 'center',
                    dataIndex: 'projectMember',
                    customRender: (text, r) => {
                        if (!text) {
                            return ''
                        } else {
                            return filterMultiDictText(this.dictOptions['projectMember'], text + '')
                        }
                    }
                },
                {
                    title: '分配合同额(元)',
                    align: 'center',
                    dataIndex: 'contractAmount'
                },
                {
                    title: '合同额占比(%)',
                    align: 'center',
                    dataIndex: 'contractRate'
                },
                {
                    title: '工时单价(元)',
                    align: 'center',
                    dataIndex: 'dayCost'
                },
                {
                    title: '预算工时(小时)',
                    align: 'center',
                    dataIndex: 'expectWorkTime'
                }, {
                    title: '项目绩效(元)',
                    align: 'center',
                    dataIndex: 'projectPerformance'
                },
                {
                    title: '人工成本(元)',
                    align: 'center',
                    dataIndex: 'laborCost'
                }
            ],
            // 进度列表
            templateColumns: [
                {
                    title: '顺序',
                    dataIndex: '',
                    key: 'rowIndex',
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '节点名称',
                    align: 'center',
                    dataIndex: 'nodeName'
                },
                {
                    title: '节点进度(%)',
                    align: 'center',
                    dataIndex: 'nodeProgress',
                    scopedSlots: { customRender: 'titleSlot' }
                },
                {
                    title: '完成状态',
                    align: 'center',
                    dataIndex: 'taskCompleteStatus_dictText'
                },
                {
                    title: '完成时间',
                    align: 'center',
                    dataIndex: 'completeTime'
                },
                {
                  title: '收入确认节点',
                  align: 'center',
                  dataIndex: 'isConfirmIncomeNode_dictText'
                }
            ],

            // 款项进度
            paymentProgressColumns: [
                {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    align: 'center',
                    customRender: function (t, r, index) {
                        return parseInt(index) + 1;
                    }
                },
                {
                    title: '款项名称',
                    align: 'center',
                    ellipsis: true,
                    dataIndex: 'nodeName'
                },
                {
                    title: '金额(元)',
                    align: 'center',
                    ellipsis: true,
                    dataIndex: 'paymentMoney'
                },
                {
                    title: '款项节点说明',
                    align: 'center',
                    ellipsis: true,
                    dataIndex: 'nodeDesc'
                },
                // {
                //     title: '是否关联任务',
                //     align: 'center',
                //     ellipsis: true,
                //     customRender: (text) => {
                //         if (text === '' || text === null || text === undefined) {
                //             return ''
                //         } else {
                //             return text == 0 ? '否' : '是'
                //         }
                //     },
                //     dataIndex: 'isRelatedTask'
                // },
                // {
                //     title: '是否关联进度',
                //     align: 'center',
                //     ellipsis: true,
                //     customRender: (text) => {
                //         if (text === '' || text === null || text === undefined) {
                //         return ''
                //         } else {
                //         return text == 0 ? '否' : '是'
                //         }
                //     },
                //     dataIndex: 'isRelatedTaskNode'
                // },
                {
                  title: '本任务关联款项金额(元)',
                  align: 'center',
                  ellipsis: true,
                  dataIndex: 'taskPaymentMoney'
                },
                {
                  title: '任务进度',
                  align: 'center',
                  ellipsis: true,
                  dataIndex: 'taskNodeId_dictText'
                },
                {
                  title: '节点进度(%)',
                  align: 'center',
                  ellipsis: true,
                  dataIndex: 'taskProgress'
                }
            ],
            url: {
                historyList: '/api/erpmng/act/task/processHistoryList', // 流程历史跟踪接口
                queryByIds: '/api/erp/administration/seal/erpSealCertificationChangeRecord/queryByIds2', // 印章列表
                // queryById: '/api/erp/omc/task/erpOmcTaskDistribution/queryById', // 獲取詳情
                erpOmcProjectQueryById: '/api/erp/omc/project/erpOmcProject/queryById',
                // queryPageList: '/api/erp/omc/project/erpOmcProjectTaskFinal/queryPageList'
                queryById: '/api/erp/task/erpOmcTaskRedistribution/queryById',
                // erpOmcProjectQueryById: '/api/erp/task/project/erpOmcProject/queryById',
                queryPageList: '/api/erp/omc/project/erpOmcProjectTaskFinal/queryPageList',
                generatedFormNumber: '/api/erp/base/generatedFormNumber'
            },
            cust_lxr: 'erp_omc_customer_manager_contact,lxr,id,del_flag=0 and main_id=0',
            purchaseFile: [], // 附件
            file: [], // 任务附件
          productBudgetFile: [], // 生产绩效表
          projectBudgetFile: [] // 项目预算表
        };
    },
    created() {
        this.initDictConfig()
    },
    watch: {
        formData: {
            async handler(val) {
                if (val) {
                  this.cust_lxr = await 'erp_omc_customer_manager_contact,lxr,id,del_flag=0 and main_id=\'' + val.ownerUnit + '\'';
                  // 获取项目编号
                  // this.getProjectNumber(val.projectId)
                  // this.getChildTableList(val.id)
                  // this.getTaskNumber(val.taskId)
                  // this.queryPaymentListByProjectId(val.taskId)
                  if (val.id && val.projectId && val.taskId) {
                    this.getPaymentList(2, val.id, val.projectId, val.taskId) // 获取款项进度列表
                  }
                  this.getTemplates(val.id)
                  // this.getMembers(val.id)
                  if (val.attachment) {
                      this.purchaseFile = val.attachment.split(',')
                  } else {
                      this.purchaseFile = []
                  }
                  if (val.taskFile) {
                      this.file = val.taskFile.split(',')
                  } else {
                      this.file = []
                  }
                  if (val.projectBudgetFile) {
                    this.projectBudgetFile = val.projectBudgetFile.split(',')
                  } else {
                    this.projectBudgetFile = []
                  }
                  if (val.productBudgetFile) {
                    this.productBudgetFile = val.productBudgetFile.split(',')
                  } else {
                    this.productBudgetFile = []
                  }
                }
            },
            immediate: true,
            deep: true
        },
        formDataHistory: {
            handler(val) {
                if (val) {
                    this.getHistoryList()
                }
            },
            immediate: true
        }
    },
    methods: {
        initDictConfig() {
            // 人员名称
            initDictOptions('erp_employee_file,name,id').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'handlerId', res.result)
                    this.$set(this.dictOptions, 'undertaker', res.result)
                    this.$set(this.dictOptions, 'minister', res.result)
                    this.$set(this.dictOptions, 'projectLeading', res.result)
                    this.$set(this.dictOptions, 'approvalEngineer', res.result)
                    this.$set(this.dictOptions, 'projectMember', res.result)
                }
            })
            // 部门名称
            initDictOptions('sys_depart,depart_name,id').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'handlerDeptId', res.result)
                    this.$set(this.dictOptions, 'executeDepart', res.result)
                }
            })
            initDictOptions('sys_depart,depart_name,org_code').then((res) => {
              if (res.success) {
                this.$set(this.dictOptions, 'sysOrgCode', res.result)
              }
            })
            initDictOptions('sys_user,realname,username').then((res) => {
              if (res.success) {
                this.$set(this.dictOptions, 'createBy', res.result)
              }
            })
            // 团队名称
            initDictOptions('erp_omc_team_manager,alias_name,id').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'teamName', res.result)
                    this.$set(this.dictOptions, 'productTeam', res.result)
                }
            })
            // 单位
            initDictOptions('erp_company_files,file_name,id').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'signUnit', res.result)
                }
            })
            // 业主单位
            initDictOptions('erp_purchase_supplier,enterprise_name,id').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'ownerUnit', res.result)
                }
            })
            // 联系人
            initDictOptions(this.cust_lxr).then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'contacts', res.result)
                }
            })
            // 项目来源
            initDictOptions('xmly_type').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'projectSource', res.result)
                }
            })
            // 任务类型
            initDictOptions('task_type').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'taskType', res.result)
                }
            })
            // 审批级别
            initDictOptions('approval_level').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'approvalLevel', res.result)
                }
            })
            // 行业类别
            initDictOptions('industry_category').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'industryCategory', res.result)
                }
            })
            // 复杂程度
            initDictOptions('industry_coefficient').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'complexity', res.result)
                }
            })
            // 是否出具报告
            initDictOptions('YES_OR_NO').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'isOutReport', res.result)
                }
            })
            // 是否出具报告
            initDictOptions('expense_accounting_method').then((res) => {
                if (res.success) {
                    this.$set(this.dictOptions, 'expenseAccountingMethod', res.result)
                }
            })
        },
        // 获取列表
        getHistoryList() {
            var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
            getAction(this.url.historyList, params).then(res => {
                if (res.success) {
                    this.dataHistorySource = res.result.records || res.result
                }
            })
        },
        // 获取进度模板
        getTemplates(id) {
            getAction('/api/erp/omc/task/erpOmcTaskDistribution/queryTaskNodeListByMainId', { id }).then((res) => {
                if (res.success) {
                    this.templateDataList = res.result
                }
            })
        },

        getPaymentList(handlerType, id, projectId, taskId) {
            getAction('/api/erp/omc/task/erpOmcTaskDistributionChange/queryPaymentList', { projectId, id, taskId, handlerType }).then((res) => {
                if (res.success) {
                this.progressNodeVoList = res.result
                }
            })
        },

        // 获取开始的款项进度列表
        queryPaymentListByProjectId(taskId, flag) {
            getAction('/api/erp/omc/task/erpOmcTaskDistribution/queryTaskPaymentList', { taskId }).then((res) => {
                if (res.success) {
                    this.progressNodeVoList = res.result
                }
            })
        },

        getAddress(text) {
            if (!text) {
                return false
            }
            var areaList = text.split(',')
            var areaText = ''
            this.address.map(value => {
                if (areaList[0] && areaList[0] == value.code) {
                    areaText = areaText + value.name + '/'
                    if (value && value.children && value.children.length) {
                        value.children.map(val => {
                            if (areaList[1] && areaList[1] == val.code) {
                                areaText = areaText + val.name + '/'

                                if (val && val.children && val.children.length) {
                                    val.children.map(va => {
                                        if (areaList[2] && areaList[2] == va.code) {
                                            areaText = areaText + va.name
                                        }
                                    })
                                }
                            }
                        })
                    }
                }
            })
            return areaText
        },

        tableRowClass(record, index) {
            if (index == 0) {
                return 'rowClass';
            }
            return ''
        }
    }
};
</script>
<style lang="less" scoped>
.page {
    background: #ffffff;
    padding: 19px 28px 0 28px;
    width: 750px;

    .print_title {
        font-size: 15px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9px;
    }

    .title {
        background: #EEEEEE;
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        padding: 11px 9px;
    }

    .content {
        font-size: 13px;
    }

    .title_table {
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
    }
}

/deep/ .rowClass {
    font-size: 10px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
}

/deep/ .ant-table-thead th {
    font-size: 10px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
}

/deep/ .ant-table-thead tr {
    background: #EEEEEE;
}

/deep/ .ant-table-small>.ant-table-content>.ant-table-body {
    margin: 0 0px;
}

/deep/ .ant-table-body tr {
    font-size: 10px;
    font-family: Alibaba PuHuiTi 2.0;
    font-weight: normal;
    color: #000000;
}

/deep/ .ant-table-body tr td {
    word-wrap: break-word;
    word-break: break-all;
}

.content {
    font-size: 13px;
}
</style>
